<template>
	<div class="upload-wrap">
		<el-dialog
			title="系统图标"
			v-model="dialogVisible"
			:close-on-click-modal="false"
			custom-class="upload-dialog"
			:close-on-press-escape="false"
			@close="cancelFunc"
			:width="dialogWidth"
			:append-to-body="true"
		>
			<!--我的资源库-->
			<div class="fileContainer">
				<div class="file-type">
					<ul>
						<li :class="activeType == item.categoryId ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="selectTypeFunc(item.categoryId)">
							{{ item.name }}
						</li>
					</ul>
				</div>
				<div class="file-content">
					<ul class="fileContainerUI clearfix">
						<li class="file" v-for="(item, index) in fileList" :key="index" @click="selectFileFunc(item, index)">
							<div v-if="item.selected == true" class="selectedIcon">
								<el-icon><Check /></el-icon>
							</div>
							<img v-if="this_config.fileType == 'image'" :scr="item.image" :style="'background-image:url(' + item.image + ')'" alt="" />
							<p class="desc">{{ item.name }}</p>
						</li>
					</ul>
				</div>
			</div>

			<!--分页-->
			<div class="pagination-wrap">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="curPage"
					:page-sizes="[12, 24, 36, 42, 48]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalDataNumber"
				></el-pagination>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button size="small" @click="cancelFunc">取 消</el-button>
					<el-button size="small" type="primary" @click="confirmFunc">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import FileApi from '@/api/file.js';
export default {
	components: {},
	data() {
		return {
			/*宽度*/
			dialogWidth: '910px',
			/*类别*/
			activeType: null,
			categoryId: '',
			/*图片类别*/
			typeList: [],
			/*图标路径*/
			imageUrl: null,
			/*弹窗显示*/
			dialogVisible: true,
			/*文件列表*/
			fileList: [],
			/*分类添加loading*/
			addLoading: false,
			/*默认值*/
			this_config: {
				/*上传个数*/
				total: 1,
				fileType: 'image'
			},
			/*记录选中的个数*/
			record: 0,
			/*是否加载完成*/
			loading: true,
			/*列表数据*/
			tableData: [],
			/*一页多少条*/
			pageSize: 12,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
			/*是否显示图片类别编辑框*/
			isShowCategory: false,
			/*当前类别model*/
			category: null,
			/*选中图片*/
			fileIds: [],
			accept: ''
		};
	},
	props: ['config'],
	created() {
		/*覆盖默认值*/
		if (Object.prototype.toString.call(this.config).toLowerCase() === '[object object]') {
			for (let key in this.config) {
				if (this.config[key]) {
					this.this_config[key] = this.config[key];
				}
			}
			if (this.this_config['fileType'] == 'image') {
				this.accept = 'image/jpeg,image/png,image/jpg';
			} else {
				this.accept = 'video/mp4';
			}
		}

		this.getFileCategory();
		this.getData();
	},
	methods: {
		/*获取图片列表*/
		getFileCategory() {
			let self = this;
			let param = {
				pageIndex: self.curPage,
				pageSize: self.pageSize,
				parentId: self.activeType,
				fileType: self.this_config.fileType
			};
			FileApi.SystemPictureList(param, true)
				.then(res => {
					self.loading = false;
					self.fileList = res.data.records;
					self.totalDataNumber = res.data.total;
				})
				.catch(error => {
					self.loading = false;
				});
		},
		/*获取分类列表*/
		getData: function() {
			let self = this;
			FileApi.PictureIndex(
				{
					type: self.this_config.fileType
				},
				true
			)
				.then(res => {
					let type = [
						{
							categoryId: null,
							name: '全部'
						}
					];
					self.typeList = type.concat(res.data);
					self.categoryId = self.typeList.categoryId;
					console.log('index', self.typeList);
				})
				.catch(error => {
					self.loading = false;
				});
		},

		/*添加图片类别*/
		addCategory() {
			this.isShowCategory = true;
			this.category = null;
		},

		/*修改类别*/
		editCategoryFunc(item) {
			this.isShowCategory = true;
			this.category = item;
		},

		/*关闭类别层*/
		closeCategoryFunc(e) {
			if (e != null) {
				this.getFileCategory();
			}
			this.isShowCategory = false;
		},

		/*删除类别提示*/
		deleteCategoryFunc(e) {
			ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.deleteCategory(e);
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消删除'
					});
				});
		},

		/*删除类别*/
		deleteCategory(e) {
			let self = this;
			FileApi.deleteCategory({
				categoryId: e
			})
				.then(data => {
					ElMessage({
						message: '删除成功',
						type: 'success'
					});
					self.activeType = null;
					self.getFileCategory();
					self.getData();
				})
				.catch(error => {
					ElMessage.error('删除失败');
				});
		},

		/*选择类别*/
		selectTypeFunc(id) {
			this.activeType = id;
			this.curPage = 1;
			this.getFileCategory();
		},

		/*选择第几页*/
		handleCurrentChange(val) {
			this.curPage = val;
			this.getFileCategory();
		},

		/*每页多少条*/
		handleSizeChange(val) {
			this.curPage = 1;
			this.pageSize = val;
			this.getFileCategory();
		},

		/*选择上传图片*/
		fileChange(e) {
			console.log(e);
		},

		/*选择图片之前*/
		onBeforeUploadImage(file) {
			return true;
		},

		/*上传图片*/
		UploadImage(param) {
			let self = this;
			const loading = ElLoading.service({
				lock: true,
				text: '文件上传中,请等待',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			const formData = new FormData();
			formData.append('iFile', param.file);
			formData.append('categoryId', self.activeType == null ? 0 : self.activeType);
			formData.append('fileType', self.this_config.fileType);
			FileApi.uploadFile(formData)
				.then(response => {
					loading.close();
					self.getFileCategory();
					param.onSuccess(); // 上传成功的图片会显示绿色的对勾
					// 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
				})
				.catch(response => {
					loading.close();
					ElMessage({
						message: '本次上传文件失败',
						type: 'warning'
					});
					param.onError();
				});
		},

		/*选择图片*/
		selectFileFunc(item, index) {
			if (item.selected) {
				item.selected = false;
				this.record--;
			} else {
				item.selected = true;
				this.record++;
			}
			this.fileList[index] = item;
		},

		/*删除图片*/
		deleteFileFunc(e) {
			let self = this;
			let loading = null;
			ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					loading = ElLoading.service({
						lock: true,
						text: '正在删除',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					let temp_list = [];
					if (e) {
						temp_list.push(e.fileId);
					} else {
						for (let i = 0; i < self.fileList.length; i++) {
							let item = self.fileList[i];
							if (item.selected) {
								temp_list.push(item.fileId);
							}
						}
					}
					if (temp_list.length == 0) {
						loading.close();
						ElMessage({
							message: '请选择文件',
							type: 'warning'
						});
						return;
					}
					FileApi.deleteFiles(
						{
							fileIds: temp_list.join(',')
						},
						true
					)
						.then(data => {
							loading.close();
							ElMessage({
								message: '删除成功',
								type: 'success'
							});
							self.getFileCategory();
						})
						.catch(error => {
							loading && loading.close();
						});
				})
				.catch(() => {
					loading && loading.close();
					ElMessage({
						message: '删除失败',
						type: 'warning'
					});
				});
		},

		/*选择图片确认*/
		confirmFunc() {
			let list = [];
			let leng = 0;
			for (let i = 0; i < this.fileList.length; i++) {
				let item = this.fileList[i];
				if (item.selected) {
					let obj = {
						filePath: item.image
					};
					list.push(obj);
					leng++;
				}
				if (leng > this.this_config.total) {
					break;
				}
			}
			this.$emit('closeSystem', list);
		},

		/*取消*/
		cancelFunc() {
			this.$emit('closeSystem', null);
		}
	}
};
</script>

<style lang="scss">
.upload-dialog .el-dialog__body {
	padding-top: 0;
	padding-bottom: 0;
}

.upload-wrap-inline .leval-item {
	display: inline-block;
}

.upload-wrap-inline .upload-btn {
	float: right;
}

.fileContainer {
	position: relative;
	padding-left: 120px;
}

.fileContainer .file-type {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow-y: auto;
	width: 120px;
}

.fileContainer .file-type li {
	padding: 10px 0;
	cursor: pointer;
	text-align: center;
	padding-right: 20px;
	min-height: 20px;
	position: relative;
}

.fileContainer .file-type li.active {
	background: #b4b4b4;
	color: #ffffff;
}

.fileContainer .file-type li .operation {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 20px;
}

.fileContainer .file-type li:hover .operation {
	display: block;
}

.fileContainer .file-content {
	height: 300px;
	text-align: center;
	overflow: hidden;
	padding: 10px;
	margin: 0;
	overflow-y: auto;
	border: 1px solid #c6c6c6;
}

.fileContainer li.file {
	float: left;
	margin: 10px 9px 0px;
	position: relative;
	width: 100px;
}

.fileContainer li.file img {
	display: inline-block;
	width: 100px;
	height: 100px;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #fff;
}

.fileContainer li.file p.desc {
	font-size: 12px;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.fileContainer li.file:hover .bottom-shade {
	display: block;
}

.fileContainer .bottom-shade {
	position: absolute;
	bottom: 16px;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	height: 26px;
	line-height: 26px;
	width: 100%;
	display: none;
	transform: all 0.2s ease-out 0s;
	color: #ffffff;
}
.fileContainer .bottom-shade a {
	color: #ffffff;
}

.fileContainer .selectedIcon {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	background: #ff9900;
	z-index: 1;
	color: #ffffff;
	cursor: pointer;
}

// :focus {
//   outline: -webkit-focus-ring-color auto 1px;
// }

.upload-dialog .pagination-wrap {
	margin-top: 16px;
	text-align: right;
}

.move-type {
	max-height: 200px;
	overflow-y: auto;
}
.move-type li {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
}
.move-type li:hover {
	background: #c6e2ff;
}
</style>
